<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>学生信息</span>
        <el-button @click="startEdit" style="float: right; padding: 3px 0" type="text">编辑</el-button>
      </div>
      <div>
        <div class="info-item">
          <p class="info-colum">
            <label>学号:</label>
            <span v-text="studentInfoShow.nid"></span>
          </p>
          <p class="info-colum">
            <label>姓名:</label>
            <span v-text="studentInfoShow.name"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>身份证号码:</label>
            <span v-text="studentInfoShow.identity"></span>
          </p>
          <p class="info-colum">
            <label>性别:</label>
            <span v-text="studentInfoShow.sex"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>手机号码:</label>
            <span v-text="studentInfoShow.phone"></span>
          </p>
          <p class="info-colum">
            <label>家庭地址:</label>
            <span v-text="studentInfoShow.address"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>生源地:</label>
            <span v-text="studentInfoShow.source"></span>
          </p>
          <p class="info-colum">
            <label>民族:</label>
            <span v-text="studentInfoShow.nation"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>籍贯:</label>
            <span v-text="studentInfoShow.nativeplace"></span>
          </p>
          <p class="info-colum">
            <label>学年:</label>
            <span v-text="studentInfoShow.xn"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>专业编号:</label>
            <span v-text="Zhuan.nid"></span>
          </p>
          <p class="info-colum">
            <label>专业名称:</label>
            <span v-text="Zhuan.name"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>班级编号:</label>
            <span v-text="Ban.nid"></span>
          </p>
          <p class="info-colum">
            <label>班级名称:</label>
            <span v-text="Ban.name"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>系编号:</label>
            <span v-text="Xi.nid"></span>
          </p>
          <p class="info-colum">
            <label>系名称:</label>
            <span v-text="Xi.name"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>院编号:</label>
            <span v-text="Yuan.nid"></span>
          </p>
          <p class="info-colum">
            <label>院名称:</label>
            <span v-text="Yuan.name"></span>
          </p>
        </div>
      </div>
    </el-card>
    <div :class="['alertBg',isEdit?'show':'']">
      <div class="alertForm">
        <el-form label-width="80px">
          <div style="display:flex">
            <el-form-item label="姓名">
              <el-input v-model="editSubmitForm.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="editSubmitForm.sex"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="身份证">
              <el-input v-model="editSubmitForm.identity"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="手机号">
              <el-input v-model="editSubmitForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="籍贯">
              <el-input v-model="editSubmitForm.nativeplace"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="来源地">
              <el-input v-model="editSubmitForm.source"></el-input>
            </el-form-item>
            <el-form-item label="民族">
              <el-input v-model="editSubmitForm.nation"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="家庭住址">
            <el-input v-model="editSubmitForm.address"></el-input>
          </el-form-item>
          <!-- <el-form-item label="专业班级">
            <el-cascader class="cascader" @change="cascaderChange" :props="changeSpacity"></el-cascader>
          </el-form-item>-->
          <el-form-item>
            <el-button @click="endEdit" type="primary">确定</el-button>
            <el-button @click="close" style="margin-left:200px">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../../http";
let tempInfo = ""; //用来放学年的
export default {
  data() {
    return {
      studentInfoShow: {},
      Yuan: {},
      Xi: {},
      Zhuan: {},
      Ban: {},
      isEdit: false,
      editSubmitForm: {},
      isEditInfo: false
    };
  },
  methods: {
    async endEdit() {
      let res = await this.$http.put(
        "studentPageAPI/info",
        this.editSubmitForm
      );
      if (res.data.success) {
        this.$message.success(res.data.message);
      } else {
        this.$message.error(res.data.message);
      }
      this.getStudentInfo();
      this.isEdit = false;
    },
    startEdit() {
      this.isEdit = true;
      this.editSubmitForm = {
        name: this.studentInfoShow.name,
        sex: this.studentInfoShow.sex,
        identity: this.studentInfoShow.identity,
        phone: this.studentInfoShow.phone,
        address: this.studentInfoShow.address,
        nativeplace: this.studentInfoShow.nativeplace,
        source: this.studentInfoShow.source,
        nation: this.studentInfoShow.nation
      };
    },
    close() {
      this.isEdit = false;
      this.editSubmitForm = {};
    },
    getStudentInfo() {
      let _this = this;
      return new Promise(async function(resolve, reject) {
        let res = await _this.$http.get("studentPageAPI/info");
        _this.studentInfoShow = res.data;
        _this.Yuan = res.data.specialty.superior.superior;
        _this.Xi = res.data.specialty.superior;
        _this.Zhuan = res.data.specialty;
        _this.Ban = res.data.class;
        tempInfo = res.data.xn;
        resolve && resolve();
      });
    }
  },
  created() {
    const loading = this.$loading({
      lock: true,
      text: "正在加载数据中，请稍等~",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)"
    });
    Promise.all([this.getStudentInfo()])
      .then(res => {
        loading.close();
      })
      .catch(res => {
        loading.close();
      });
  }
};
</script>

<style scoped>
.cascader {
  width: 400px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 800px;
}
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-colum {
  width: 50%;
  padding: 10px 0;
}
.alertBg {
  display: none;
}
.show {
  display: flex;
}
</style>
.table-box {
  display: flex;
  width: 100%;
}
table {
  width: 90%;
}
td {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}
td:nth-child(1) {
  border-left: 1px solid black;
}
tr:nth-child(1) td {
  border-top: 1px solid;
}
td label {
  display: inline-block;
  padding: 10px;
}
.img-box {
  width: 100%;
}
.img-box img {
  width: 100%;
}
.right-box {
  width: 20%;
}
</style>